<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    
</head>

<body>
    <script>
        /**
         * 请求拦截器、响应拦截器
         *  
         *  1. 请求拦截器和响应拦截器可以添加多个
         *  2. 请求拦截器先添加的后执行，后添加的先执行。响应拦截器按添加顺序执行
         *  
         */

        // 添加请求拦截器
        // 语法：axios.interceptors.request.use(成功的回调,失败的回调);

        // 观察发现，use 成功回调可以将成功的状态和结果向下传递
        //               失败回调可以将失败的状态和结果向下传递
        // axios.interceptors.request.use(config => {
        //     // Do something before request is sent
        //     return config;
        // }, error => {
        //     // Do something with request error
        //     return Promise.reject(error);
        // });

        axios.interceptors.request.use(config1 => {
            console.log('请求拦截器成功回调 1： ',config1);
            return config1;
        }, error1 => {
            // Do something with request error
            console.log('请求拦截器失败回调 1： ',error1);
            return Promise.reject(error1);
        });

        axios.interceptors.request.use(config2 => {
            console.log('请求拦截器成功回调 2： ',config2);
            return config2;
            // return Promise.reject('error123123');
        }, error2 => {
            // Do something with request error
            console.log('请求拦截器失败回调 2： ',error2);
            return Promise.reject(error2);
        });


        // 添加响应拦截器：
        axios.interceptors.response.use(response1 => {
            console.log('响应拦截器成功回调 1： ',response1);
            return response1;
        }, error1 => {
            console.log('响应拦截器失败回调 1： ',error1);
            return Promise.reject(error1);
        });

        axios.interceptors.response.use(response2 => {
            console.log('响应拦截器成功回调 2： ',response2);
            return response2;
        }, error2 => {
            console.log('响应拦截器失败回调 2： ',error2);
            return Promise.reject(error2);
        });


        axios.get('http://localhost:3000/computers').then(data=>{
            console.log('请求结果： ',data.data);
        }, reason=>{
            console.log('失败: ', reason);
        })


    </script>
</body>

</html>